<template>
  <div>
    <div class="zan-panel" v-for="(order,index) in order_list" :key="index">
      <div class="cell field zan-font-bold" style="color:black;">
        <div class="field__title">取餐号:  {{order.foot_num}}</div>
        <div class="field__input zan-cell__ft" style="color:black;">-{{order.point}}积分</div>
      </div>
      <div class="cell field" style="color:black;">
        <div class="field__title">优惠：￥ {{order.discount_amount}}</div>
        <div class="field__input zan-cell__ft" style="color:black;">实付：￥ {{order.pay_amount}}</div>
      </div>
      <div class="cell field" style="color:black;">
        <div class="field__title">订单编号</div>
        <div class="field__input cell__bd">{{order.order_no}}</div>
      </div>
      <div class="cell field" style="color:black;">
        <div class="field__title">下单时间</div>
        <div class="field__input cell__bd">{{order.paid_at}}</div>
      </div>
      <div class="cell field">
        <div class="field__input zan-cell__ft" @click="seeOrderDetail(order.id)">查看详情>></div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/utils/api'
import {formatTime} from '@/utils/index'
import { mapState, mapActions ,mapGetters } from 'vuex'
export default {
  data () {
    return {
      order_list:[],
      page:1
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  methods: {
    seeOrderDetail(id){
      wx.navigateTo({url:"/pages/home/order_detail?order_id=" + id})
    },
  },
  async onReachBottom(){
    this.page += 1
    let result = await api.findOrder({user_id:this.user.id,page:this.page,limit:10,pay_status:'success',order_type:'points_mall'})
    if (result.code == 0) {
      result.data.data.forEach(item=>{
        item.paid_at = formatTime(item.paid_at)
        item.discount_amount = item.discount_amount/100
        item.pay_amount = item.pay_amount/100
      })
      let order_list = _.cloneDeep(this.order_list)
      order_list = order_list.concat(result.data.data)
      this.order_list = order_list
    }
  },
  async mounted () {
    console.log('111')
    this.page = 1
    this.order_list = []
    let result = await api.findOrder({user_id:this.user.id,page:this.page,limit:10,pay_status:'success',order_type:'points_mall'})
    if (result.code == 0) {
      result.data.data.forEach(item=>{
        item.paid_at = formatTime(item.paid_at)
        item.discount_amount = item.discount_amount/100
        item.pay_amount = item.pay_amount/100
      })
      this.order_list = result.data.data
    }
  },
  /*async onShow () {
    console.log('222')
    this.order_list = []
    this.page = 1
    let result = await api.findOrder({user_id:this.user.id,page:this.page,limit:10,pay_status:'success'})
    if (result.code == 0) {
      result.data.data.forEach(item=>{
        item.paid_at = formatTime(item.paid_at)
        item.discount_amount = item.discount_amount/100
        item.pay_amount = item.pay_amount/100
      })
      this.order_list = result.data.data
    }
  }*/
}
</script>

<style >
page{
  background: #F2F2F2;
}
.cell{
  position:relative;
  padding:5px;
  display:flex;
  align-items:center;
  line-height:1.4;
  font-size:15px;
}
.cell::after{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:190%;
  height:200%;
  transform:scale(.5);
  transform-origin:0 0;
  pointer-events:none;
  box-sizing:border-box;
  border:0 solid #e5e5e5;
  border-bottom-width:1px;
  left:15px;right:0
}
.field{
  padding:3px 15px;
  color:#333;
  background: white;
}
.field__title{
  color:#333;
  min-width:65px;
  padding-right:20px;
}
.field__input{
  flex:1;
  line-height:1.6;
  padding:4px 0;
  min-height:22px;
  height:auto;
  font-size:15px;
}
.cell__bd{
  flex:1;
}
.cart-list-box{
  background:#FFFFFF;
  display:flex;
  font-size:15px;
  height: 60px;
  border:0 solid #e5e5e5;
  border-bottom-width:1px;
}
.list-info{
  width:60%;
  padding:5px 12px;
}
.list-info-size{
  padding-top: 10px;
  color:#B1B1B1;
}
</style>
